<template>
	<view class="container">
		<view class="contant">
			<view class="contant-img">
				<image :src="imgUrl('uploads/20250715/f4b8731a3a153616e8f3264c06e4178c.png')" mode="widthFix" />
			</view>
			<view class="contant-padding">
				<view class="contant-form">
					<view class="form-title">
						就诊人信息确认
					</view>
					<view class="form-title-tips">
						请务必如实填写就诊人信息，否则将影响就诊人的就医事宜
					</view>
					<view>
						<u--form :labelStyle="{color:'#333333',fontSize:'30rpx'}" :model="form" :rules="rules"
							ref="uForm" labelWidth="auto" labelAlign="left">
							<u-form-item label="就诊人和申请人关系:" labelPosition="top" prop="relationship" borderBottom
								required>
								<u-radio-group style="margin-top: 10rpx;" v-model="form.relationship">
									<u-radio :activeColor="'#FF7F36'" v-for="(item, index) in relationshipActions"
										:key="index" :label="item.name" :name="item.name">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="就诊人姓名:" labelPosition="left" prop="patient_name" borderBottom required>
								<u--input v-model="form.patient_name" border="none" placeholder="输入就诊人姓名"></u--input>
							</u-form-item>
							<u-form-item label="就诊人手机号:" prop="patient_phone_number" borderBottom required>
								<u--input v-model="form.patient_phone_number" border="none"
									placeholder="输入就诊人手机号"></u--input>
							</u-form-item>
							<u-form-item label="就诊人身份证号码:" prop="patient_id_number" borderBottom required>
								<u--input v-model="form.patient_id_number" border="none"
									placeholder="输入就诊人身份证号码"></u--input>
							</u-form-item>
							<u-form-item label="就诊人症状描述:" prop="chief_complaint" borderBottom required>
								<u--input v-model="form.chief_complaint" border="none"
									placeholder="输入就诊人症状描述"></u--input>
								<!-- 		<u--textarea autoHeight :height="6" v-model="form.chief_complaint" border="none"
									placeholder="输入症状描述"></u--textarea> -->
							</u-form-item>
							<u-form-item label="发病时间:" prop="onset_time" borderBottom required
								@click="showOnsetTime = true;">
								<view v-if="form.onset_time">
									<view style="line-height: 2;">
										{{moment(Number(form.onset_time)).format("YYYY-MM-DD HH:mm")}}
									</view>
								</view>
								<u--input readonly border="none" placeholder="点击选择发病时间"
									v-if="!form.onset_time"></u--input>
							</u-form-item>
							<u-form-item label="就诊历史:" prop="medical_history" borderBottom>
								<!-- multiple -->
									<u-upload :fileList="medical_history_list" @afterRead="afterRead"
										@delete="deletePic" name="medicalHistory"
										style="display: flex;justify-content: center" :maxCount="1" width="40"
										height="40">
										<image :src="imgUrl('/uploads/20250716/64582e3bd4e9a3e4a0d24415d2acbcd5.png')"
											mode="widthFix"
											style="width:43.33rpx;height: 40rpx;vertical-align: bottom;">
										</image>
									</u-upload>
							</u-form-item>
							<u-form-item label="是否指定医院:" labelPosition="top" prop="is_designated_hospital" borderBottom
								required>
								<view class="radio-box">
									<view class="radio-item" @click="changeRadio('is_designated_hospital',item.name)"
										:class="form.is_designated_hospital==item.name?'radio-active':''"
										v-for="(item, index) in firstVisitActions" :key="index">{{item.name}}</view>
								</view>
							</u-form-item>
							<u-form-item label="是否指定医生:" labelPosition="top" prop="is_designated_doctor" borderBottom>
								<view class="radio-box">
									<view class="radio-item" @click="changeRadio('is_designated_doctor',item.name)"
										:class="form.is_designated_doctor==item.name?'radio-active':''"
										v-for="(item, index) in firstVisitActions" :key="index">{{item.name}}</view>
								</view>
							</u-form-item>
							<u-form-item label="意向医院:" prop="intended_hospital" borderBottom>
								<u--input v-model="form.intended_hospital" border="none"
									placeholder="输入意向医院"></u--input>
							</u-form-item>
							<u-form-item label="意向科室:" prop="intended_department" borderBottom>
								<u--input v-model="form.intended_department" border="none"
									placeholder="输入意向科室"></u--input>
							</u-form-item>
							<u-form-item label="意向医生:" prop="intended_doctor" borderBottom>
								<u--input v-model="form.intended_doctor" border="none" placeholder="输入意向医生"></u--input>
							</u-form-item>
							<u-form-item label="意向日期:" prop="intended_date" borderBottom
								@click="showIntendedDate = true;">
								<view class="" v-if="form.intended_date">
									<view style="line-height: 2;">
										{{moment(Number(form.intended_date)).format("YYYY-MM-DD")}}
									</view>
								</view>
								<u--input v-if="!form.intended_date" readonly border="none"
									placeholder="点击选择意向日期"></u--input>
							</u-form-item>
							<u-form-item label="是否安排出行服务:" labelPosition="top" prop="is_travel_service_arranged"
								required>
								<view class="radio-box">
									<view class="radio-item"
										@click="changeRadio('is_travel_service_arranged',item.name)"
										:class="form.is_travel_service_arranged==item.name?'radio-active':''"
										v-for="(item, index) in firstVisitActions" :key="index">{{item.name}}</view>
								</view>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>

		</view>
		<view class="footer">
			<view class="footer-tips">
				实际结算价格以审核结果为准
			</view>
			<view class="submit" @click="submit">{{submit_loading?'处理中...':'提交'}}</view>
		</view>
		<!-- 类型 -->
		<u-action-sheet :show="showType" :actions="typeActions" title="请选择类型" @close="showType = false"
			@select="typeSelect">
		</u-action-sheet>
		<!-- 发病时间 -->
		<u-datetime-picker ref="datetimePicker" :confirmColor="'#f54730'" :show="showOnsetTime"
			@cancel="showOnsetTime=false" @confirm="onsetTimeConfirm" v-model="onsetTime" mode="datetime"
			@close="showOnsetTime=false" :formatter="formatter"></u-datetime-picker>
		<!-- 意向日期 -->
		<u-datetime-picker ref="datetimePicker" :confirmColor="'#f54730'" :show="showIntendedDate"
			@cancel="showIntendedDate=false" @confirm="intendedDateConfirm" v-model="intendedDate" mode="date"
			:formatter="formatter"></u-datetime-picker>
	</view>
</template>

<script setup>
	import {
		imgUrl
	} from '../../utils/global';
	import moment from "moment"
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		medicalApplication,
		uploadimg
	} from '@/api/index';
	import {
		useUserStore
	} from '@/store/user';
	const userStore = useUserStore();
	import {
		ref
	} from "vue";
	const medical_history_list = ref([])
	const afterRead = async (event) => {
		let lists = [].concat(event.file);
		let fileListLen = medical_history_list.value.length;
		lists.map((item) => {
			medical_history_list.value.push({
				...item,
				status: "uploading",
				message: "上传中",
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadimg(lists[i].url);
			let item = medical_history_list.value[fileListLen];
			medical_history_list.value.splice(
				fileListLen,
				1,
				Object.assign(item, {
					status: "success",
					message: "",
					url: result.url,
				})
			);
			fileListLen++
		}
		form.value.medical_history = ""
		if(medical_history_list.value.length>1){
			medical_history_list.value.forEach(item => {
				if (item.status == "success") {
					form.value.medical_history += item.url + ","
				}
			})
		}else{
			form.value.medical_history =medical_history_list.value[0].url
		}
		
	}
	// 删除图片
	const deletePic = (event) => {
		medical_history_list.value.splice(event.index, 1);
	}
	// 设置类型
	const showType = ref(false)
	const submit_loading = ref(false)
	const typeActions = ref([{
			name: "体检申请",
			value: 1
		},
		{
			name: "医疗服务申请",
			value: 2
		},
		{
			name: "其他",
			value: 3
		},
	])
	const typeSelect = (e) => {
		form.value.type = e.name
		uForm.value.validateField('type')
	}
	const datetimePicker = ref()
	// 申请等级
	const applicationLevelActions = ref([{
			name: "普通",
			value: 1
		},
		{
			name: "加急",
			value: 2
		},
		{
			name: "特急",
			value: 3
		},
	])
	// 就诊人和申请人关系
	const relationshipActions = ref([{
			name: "父母",
			value: 0
		},
		{
			name: "子女",
			value: 1
		},
		{
			name: "配偶",
			value: 2
		},
		{
			name: "本人",
			value: 3
		},
		{
			name: "其他",
			value: 3
		},
	])
	// 是否首诊\是否急诊
	const firstVisitActions = ref([{
			name: "是",
			value: true
		},
		{
			name: "否",
			value: false
		},
	])
	// 发病时间
	const showOnsetTime = ref(false)
	const onsetTime = ref(Number(new Date()))
	const onsetTimeConfirm = (e) => {
		showOnsetTime.value = false
		form.value.onset_time = e.value + ""
		uForm.value.validateField('onset_time')
	}
	// 意向日期
	const showIntendedDate = ref(false)
	const intendedDate = ref(Number(new Date()))
	const intendedDateConfirm = (e) => {
		showIntendedDate.value = false
		form.value.intended_date = e.value
		uForm.value.validateField('intended_date')
	}
	// 重置表单
	const resetFields = () => {
		medical_history_list.value = []
		form.value.medical_history = ""
		uForm.value.resetFields()
	}
	const formatter = (type, value) => {
		if (type === 'year') {
			return `${value}年`
		}
		if (type === 'month') {
			return `${value}月`
		}
		if (type === 'day') {
			return `${value}日`
		}
		if (type === 'hour') {
			return `${value}时`
		}
		if (type === 'minute') {
			return `${value}分`
		}
		return value
	}
	const changeRadio = (key, value) => {
		form.value[key] = value
	}
	// 提交表单
	const submit = () => {
		if (submit_loading.value) return
		let form_save = JSON.parse(JSON.stringify(form.value))
		uForm.value.validate().then(res => {
			form_save.uid = userStore.userInfo.id
			form_save.applicant_id = userStore.userInfo.id
			// 类型
			// form_save.type = typeActions.value.find(item => item.name == form.value.type).value
			// 申请等级
			// form_save.application_level = applicationLevelActions.value.find(item => item.name == form
			// 	.value
			// 	.application_level).value
			// 是否首诊
			// form_save.is_first_visit = firstVisitActions.value.find(item => item.name == form.value
			// 	.is_first_visit).value
			// 是否急诊
			// form_save.is_emergency = firstVisitActions.value.find(item => item.name == form.value
			// 		.is_emergency)
			// .value
			// 就诊历史
			// if(form.value.medical_history.length>0){

			// }
			// form_save.medical_history=form.medical_history.
			// 就诊人和申请人关系
			form_save.relationship = relationshipActions.value.find(item => item.name == form.value
				.relationship).value
			// 是否安排出行服务
			form_save.is_travel_service_arranged = firstVisitActions.value.find(item => item.name == form.value
				.is_travel_service_arranged).value
			// 是否指定医生
			if (form.value.is_designated_doctor) {
				form_save.is_designated_doctor = firstVisitActions.value.find(item => item.name == form.value
					.is_designated_doctor).value
			}
			// 是否指定医院
			form_save.is_designated_hospital = firstVisitActions.value.find(item => item.name == form.value
				.is_designated_hospital).value
			// 发病时间
			form_save.onset_time = moment(Number(form.value.onset_time)).format("YYYY-MM-DD HH:mm:ss")
			// 意向日期
			if (form.value.intended_date) {
				form_save.intended_date = moment(Number(form.value.intended_date)).format("YYYY-MM-DD")
			}
			submit_loading.value = true
			medicalApplication(form_save).then(res => {
				submit_loading.value = false
				uni.$u.toast('提交成功')
				resetFields()
				setTimeout(() => {
					uni.switchTab({
						url: "/pages/index/index"
					})
				}, 1000)
			}).catch(() => {
				submit_loading.value = false
			})
		}).catch(errors => {
			console.log(errors)
			uni.$u.toast('请补充表单信息')
		})
	}
	const rules = ref({
		// 'type': {
		// 	type: 'string',
		// 	required: true,
		// 	message: '请选择类型',
		// 	trigger: ['blur', 'change']
		// },
		// 'unit': {
		// 	type: 'string',
		// 	max: 100,
		// 	required: true,
		// 	message: '请填写单位',
		// 	trigger: ['blur', 'change']
		// },
		// "application_level": {
		// 	type: 'string',
		// 	max: 100,
		// 	required: true,
		// 	message: '请选择申请等级',
		// 	trigger: ['blur', 'change']
		// },
		// 'applicant_name': {
		// 	type: 'string',
		// 	max: 50,
		// 	required: true,
		// 	message: '请填写申请人姓名',
		// 	trigger: ['blur', 'change']
		// },
		// 'applicant_id': {
		// 	type: 'string',
		// 	max: 50,
		// 	required: true,
		// 	message: '请填写单位',
		// 	trigger: ['blur', 'change']
		// },
		// 'applicant_phone_number': {
		// 	type: 'string',
		// 	max: 20,
		// 	required: true,
		// 	message: '请填写申请人手机号',
		// 	trigger: ['blur', 'change']
		// },
		// 'applicant_id_number': {
		// 	type: 'string',
		// 	max: 20,
		// 	required: true,
		// 	message: '请填写申请人身份证号码',
		// 	trigger: ['blur', 'change']
		// },
		'relationship': {
			type: 'string',
			max: 100,
			required: true,
			message: '请选择就诊人和申请人关系',
			trigger: ['blur', 'change']
		},
		'patient_name': {
			type: 'string',
			max: 20,
			required: true,
			message: '请填写就诊人姓名',
			trigger: ['blur', 'change']
		},
		'patient_phone_number': {
			type: 'string',
			max: 20,
			required: true,
			message: '请填写就诊人手机号',
			trigger: ['blur', 'change']
		},
		'patient_id_number': {
			type: 'string',
			max: 20,
			required: true,
			message: '请填写就诊人身份证号码',
			trigger: ['blur', 'change']
		},
		// 'is_first_visit': {
		// 	type: 'string',
		// 	max: 20,
		// 	required: true,
		// 	message: '请确认是否首诊',
		// 	trigger: ['blur', 'change']
		// },
		// 'is_emergency': {
		// 	type: 'string',
		// 	max: 20,
		// 	required: true,
		// 	message: '请确认是否急诊',
		// 	trigger: ['blur', 'change']
		// },
		'chief_complaint': {
			type: 'string',
			max: 999,
			required: true,
			message: '请输入就诊人症状描述',
			trigger: ['blur', 'change']
		},
		'is_designated_hospital': {
			type: 'string',
			max: 20,
			required: true,
			message: '请确认是否指定医院',
			trigger: ['blur', 'change']
		},
		// 'is_designated_doctor': {
		// 	type: 'string',
		// 	max: 20,
		// 	required: true,
		// 	message: '请确认是否指定医生',
		// 	trigger: ['blur', 'change']
		// },
		'is_travel_service_arranged': {
			type: 'string',
			max: 20,
			required: true,
			message: '请确认是否安排出行服务',
			trigger: ['blur', 'change']
		},
		'onset_time': {
			type: 'string',
			max: 20,
			required: true,
			message: '请选择发病时间',
			trigger: ['blur', 'change']
		}
	})
	const uForm = ref()
	onReady(() => {
		uForm.value.setRules(rules.value)
		datetimePicker.value.setFormatter(formatter.value)
	})
	const form = ref({
		type: "", //类型
		unit: "", //单位
		application_level: "", //申请等级
		applicant_name: "", //申请人姓名
		applicant_id: "", //申请人 ID
		applicant_phone_number: "", //申请人手机号
		applicant_id_number: "", //申请人身份证号码
		is_first_visit: false, //是否首诊
		is_emergency: false, //是否急诊

		relationship: "", //就诊人和申请人关系
		patient_name: "", //就诊人姓名
		patient_phone_number: "", //就诊人手机号
		patient_id_number: "", //就诊人身份证号码
		chief_complaint: "", //主诉
		onset_time: "", //发病时间
		medical_history: "", //就诊历史 可空
		is_designated_hospital: false, //是否指定医院
		is_designated_doctor: false, //是否指定医生
		intended_hospital: "", //意向医院 可空
		intended_department: "", //意向科室 可空
		intended_doctor: "", //意向医生 可空
		intended_date: "", //意向日期 可空
		is_travel_service_arranged: false, //是否安排出行服务
	})
</script>

<style scoped>
	.container {
		background: #FAFAFA;
	}

	.contant {
		background: linear-gradient(180deg, #FFD2C8 0%, #FFCDB8 7%, #FFD0C3 12%, #FAFAFA 21%, #F8F8FA 100%);
	}

	.contant-padding {
		padding: 0 30rpx 30rpx;
	}

	.contant-form {
		padding: 30rpx 30rpx 10rpx;
		background: #fff;
		border-radius: 16rpx;
	}

	.contant-img>image {
		width: 100%;
	}

	.contant-form {
		margin-top: -80rpx;
		z-index: 2;
		position: relative;
	}

	.form-title {
		margin-bottom: 20rpx;
		color: #FF7F36;
		font-size: 32rpx;
		position: relative;
		padding-left: 26rpx;
	}

	.form-title::after {
		content: "";
		width: 6rpx;
		height: 40rpx;
		background: #FF7F36;
		border-radius: 6rpx;
		position: absolute;
		left: 0;
	}

	.radio-box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.radio-item {
		padding: 14rpx 40rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #333333;
		margin-right: 30rpx;
	}

	.radio-active {
		background: #FFF0E8;
		color: #FF7F36 !important;
	}

	.form-title-tips {
		font-size: 30rpx;
		color: #33333370;
		padding: 20rpx;
		background: #F6F6F6;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
	}

	.p-20 {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	.footer {
		background: #fff;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 60rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	}

	.footer-tips {
		/* height: 90rpx; */
		padding: 20rpx 0;
		line-height: 90rpx;
		padding: 0 30rpx;
		color: #FF7F36;
		font-size: 30rpx;
		background: #FF7F3610;
		border-radius: 8rpx;
		margin-bottom: 60rpx;
	}

	.submit {
		/* height: 80rpx; */
		padding: 20rpx;
		background: linear-gradient(180deg, #FF7F36 0%, #F54730 100%);
		text-align: center;
		border-radius: 50rpx;
		color: #fff;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>